import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import SongLyric from "@/components/songPageComment/songLyric";
import { getLyricAction } from "../../store/actionTypes";

export default memo(function Lyric(props) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getLyricAction(props.id));
  }, [dispatch, props.id]);

  const { lyric } = useSelector(
    (state) => ({
      lyric: state.getIn(["songPage", "lyric"]),
    }),
    shallowEqual
  );

  const lyricInfo = lyric.code == 200 && lyric;

  return (
    <div>
      {lyricInfo ? (
        lyricInfo.lrc ? (
          <SongLyric lyricInfo={lyricInfo} />
        ) : (
          "纯音乐,无歌词"
        )
      ) : (
        ""
      )}
    </div>
  );
});
